<template>
  <div class="box">
    <!--文本操作-->
    <el-form ref="form" label-width="100px" style="width: 90%">
      <el-form-item label="图层名：">
        <el-input size="mini" v-model="chooseComponent.layerName"></el-input>
      </el-form-item>
      <el-form-item label="在线文档：">
        <a href="#" style="font-size: 12px;color: #409eff" @click="viewDocment()">点击查看</a>
      </el-form-item>
      <el-form-item label="模块名称：">
        <el-select v-model="chooseComponent.option.borderComponentName" filterable  placeholder="请选择">
          <el-option size="mini" v-for="item in borderList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标题：" v-if="chooseComponent.option.borderComponentName=='dv-border-box-11'">
        <el-input size="mini" v-model="chooseComponent.option.title"></el-input>
      </el-form-item>
      <el-form-item label="翻转：" v-if="isReverse.indexOf(chooseComponent.option.borderComponentName)!=-1">
        <el-switch v-model="chooseComponent.option.reverse"></el-switch>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "op_text",
    computed: {
      //当前选中的值
      chooseComponent() {
        return this.$store.state.chooseComponent
      },
    },
    data(){
      return{
        //支持翻转的组件
        isReverse:["dv-border-box-4","dv-border-box-5","dv-border-box-8"],
        //支持的边框
        borderList:[
          {value:"dv-border-box-1",label:"dv-border-box-1"},
          {value:"dv-border-box-2",label:"dv-border-box-2"},
          {value:"dv-border-box-3",label:"dv-border-box-3"},
          {value:"dv-border-box-4",label:"dv-border-box-4"},
          {value:"dv-border-box-5",label:"dv-border-box-5"},
          {value:"dv-border-box-6",label:"dv-border-box-6"},
          {value:"dv-border-box-7",label:"dv-border-box-7"},
          {value:"dv-border-box-8",label:"dv-border-box-8"},
          {value:"dv-border-box-9",label:"dv-border-box-9"},
          {value:"dv-border-box-10",label:"dv-border-box-10"},
          {value:"dv-border-box-11",label:"dv-border-box-11"},
          {value:"dv-border-box-12",label:"dv-border-box-12"},
          {value:"dv-border-box-13",label:"dv-border-box-13"},
        ],
      }
    },
    methods:{
      //查看文档
      viewDocment(){
        window.open("http://datav.jiaminghi.com/guide/borderBox.html");
      }
    }
  }
</script>

<style scoped lang="less">
  .box {
    width: 100%;
    flex: 1;
    color: white;

    /deep/ .el-form-item__label {
      color: white;
    }

    /deep/ .el-collapse-item__header {
      background-color: #545c64;
      color: white;
    }

    /deep/ .el-collapse-item__content {
      background-color: #545c64;
      color: white;
    }

    /deep/ .el-radio__label {
      color: white;
    }
  }
</style>
